<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">订单信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    订单号：<span>{{orderInfo.buyerOrderList.id}}</span>
                </el-col>
                <el-col :span="8">
                    订单金额 ：<span>{{orderInfo.buyerOrderList.productSumPrice}}（{{orderInfo.buyerOrderList.productCurrency}}）</span>
                </el-col>
                <el-col :span="8">
                    下单时间：<span>{{orderInfo.buyerOrderList.timeCreate | dateYMDHMSFormat}}</span>
                </el-col>
                <el-col :span="8">
                    付款方式：<span>{{orderInfo.buyerOrderList.payMode}}</span>
                </el-col>
                <el-col :span="8">
                    成交方式：<span>{{orderInfo.buyerOrderList.tradeMode}}</span>
                </el-col>
                <el-col :span="8" v-if='orderInfo.buyerOrderList.tradeMode == "CIF"'>
                    运输方式：<span>海运</span>
                </el-col>
                <el-col :span="8">
                    起运港：<span>{{orderInfo.startHarbor ? orderInfo.startHarbor.harbor:""}}</span>
                </el-col>
                <el-col :span="8" v-if='orderInfo.buyerOrderList.tradeMode == "CIF"'>
                    目的港：<span>{{orderInfo.endHarbor ? orderInfo.endHarbor.harbor:""}}</span>
                </el-col>
                <el-col :span="8" v-else>
                    提车地点：<span>{{orderInfo.buyerOrderList.pickupAddress}}</span>
                </el-col>
                <el-col :span="8">
                    约定付款时间：<span>{{orderInfo.buyerOrderList.payTimeNode}}</span>
                </el-col>
                <el-col :span="8">
                    提车方式：<span>{{orderInfo.buyerOrderList.pickupMode}}</span>
                </el-col>
                <el-col :span="8" v-if="orderInfo.buyerOrderList.orderRemarks != null">
                    订单备注：<span>{{orderInfo.buyerOrderList.orderRemarks}}</span>
                </el-col>
                <el-col :span="8">
                    订单状态：<span>{{orderInfo.buyerOrderList.status==null ?"": buyerOrderStatus[orderInfo.buyerOrderList.status].label}}</span>
                </el-col>
            </el-row>
        </c-template>
        <!-- 提车信息 -->
        <c-template v-loading="loading" class="mb-lg tf-paragraph" v-if="orderInfo.buyerPickupApply != null">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">提车信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row" v-if="orderInfo.platformBankInfo != null">
                <el-col :span="8">
                    提车方式：<span>{{orderInfo.buyerPickupApply.pickupMode}}</span>
                </el-col>
                <el-col :span="8">
                    提车地点：<span>{{orderInfo.buyerPickupApply.pickupAddress}}</span>
                </el-col>
                <el-col :span="8">
                    联系人：<span>{{orderInfo.buyerPickupApply.contactName}}</span>
                </el-col>
                <el-col :span="8">
                    联系电话：<span>{{orderInfo.buyerPickupApply.contactMobile}}</span>
                </el-col>
            </el-row>
        </c-template>
        <!-- 收款银行 -->
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">收款银行信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row" v-if="orderInfo.platformBankInfo != null">
                <el-col :span="8">
                    银行名称：<span>{{orderInfo.platformBankInfo.bankName}}</span>
                </el-col>
                <el-col :span="8">
                    银行账号：<span>{{orderInfo.platformBankInfo.accountNo}}</span>
                </el-col>
                <el-col :span="8">
                    账户名：<span>{{orderInfo.platformBankInfo.accountName}}</span>
                </el-col>
            </el-row>
            <el-form :model="ruleForm" ref="ruleForm" label-width="auto" label-position="left" v-if="orderInfo.buyerOrderList.status == 3">
                <el-row :gutter="24" class="info-row">
                    <el-col :span="8">
                        <el-form-item label="收款银行名称：" prop="rejection">
                            <el-select v-model="ruleForm.bank" placeholder="请选择收款银行">
                                <el-option v-for="(item,index) in bankList" :label="item.bankName" :value="item.id" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </c-template>
        <!-- 合同 -->
        <c-template v-loading="loading" class="mb-lg tf-paragraph" v-if="orderInfo.buyerOrderList.status == 3 || orderInfo.contractList.length > 0">
            <el-row :gutter="24" class="info-row">
                <el-col :span="18" class="detailsTitle mb-0">合同信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-form :model="ruleForm" ref="ruleForm" label-width="auto" label-position="left" v-if="orderInfo.buyerOrderList.status == 3">
                <el-row :gutter="24" class="info-row">
                    <el-col :span="8">
                        <el-form-item label="选择签订合同企业：" prop="rejection">
                            <el-select v-model="ruleForm.company" placeholder="请选择企业">
                                <el-option v-for="(item,index) in companyList" :label="item.name" :value="item.id" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row :gutter="24" class="info-row" v-if="orderInfo.contractList.length > 0">
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.contractList" v-loading="loading">
                        <el-table-column label="序号" width="80" align="center" type="index" />
                        <el-table-column width="" label="合同名称" align="center">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="handleOpenFile(scope.row.url)">{{scope.row.contractName}}</el-link> {{scope.row.type == 0?"（模板）":""}}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="合同类型" align="center">
                            <template slot-scope="scope">
                                {{scope.row.sellerId == null ? "进口商合同" : "供应商合同" }}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="合同编号" align="center" prop="contractNb" />

                    </el-table>
                </el-col>
            </el-row>
        </c-template>
        <!-- 车辆信息 -->
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">车辆信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    车辆信息：<span>{{orderInfo.buyerOrderList.productInfo}}</span>
                </el-col>
                <el-col :span="8">
                    数量（台） ：<span>{{orderInfo.buyerOrderList.productAmount}}</span>
                </el-col>
                <el-col :span="8">
                    单价：<span>{{orderInfo.buyerOrderList.productPrice}}（{{orderInfo.buyerOrderList.productCurrency}}）</span>
                </el-col>
            </el-row>
        </c-template>
        <c-template v-loading="loading" class="mb-lg tf-paragraph" v-if="orderInfo.buyerInfo">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">进口商信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    企业名称：<span>{{orderInfo.buyerInfo.name}}</span>
                </el-col>
                <el-col :span="8">
                    联系人 ：<span>{{orderInfo.buyerInfo.contactName}}</span>
                </el-col>
                <el-col :span="8">
                    联系电话：<span>{{orderInfo.buyerInfo.contactMobile}}</span>
                </el-col>
                <!-- <el-col :span="8">
                    联系邮箱：<span></span>
                </el-col> -->
            </el-row>
        </c-template>

        <!-- 审批流 -->
        <c-template class="tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">审批意见</el-col>
            </el-row>
            <el-divider></el-divider>
            <c-approval-process :form="ruleForm" :status="orderInfo.buyerOrderList.status" :id="id" @isLoading="changeLoading" :isView="isView" ref="approvalProcess"></c-approval-process>
        </c-template>

    </div>
</template>
<script>
import cApprovalProcess from './components/c-approval-process.vue';
import { buyerOrderStatus } from "@/utils/status.js";
export default {
    components: {
        cApprovalProcess
    },
    data () {
        return {
            loading: false,
            orderInfo: {
                contractList: [],
                buyerOrderList: {},
                platformBankInfo: {},
                buyerPickupApply: {}
            },
            buyerOrderStatus: buyerOrderStatus,
            id: "",
            isView: true,
            bankList: [],
            companyList: [],
            ruleForm: {
                bank: "",
                company: ""
            }
        };
    },
    mounted () {
        this.getInfo()
    },
    methods: {
        changeLoading (loading) {
            this.isView = true
            this.loading = loading
        },
        handleOpenFile (filePath) {
            if (filePath) {
                window.open(filePath);
            } else {
                this.$message.warning("服务器地址不存在");
            }
        },
        async getInfo () {
            if (this.$route.query.id) {
                this.isView = eval(this.$route.query.isView)
                this.id = this.$route.query.id
                const params = {
                    id: this.$route.query.id,
                };
                this.loading = true;
                this.orderInfo = await this.$get({ url: "/buyerOrderList/getById", params })
                this.bankList = await this.$get({ url: "/bank/getBankList" })
                this.companyList = await this.$get({ url: "/PlatformCompanyInfo/list" })
                this.loading = false;
                this.$refs.approvalProcess.getFlowsList()
            }
        },
    },
};
</script>
<style scoped lang="scss">
.imgList {
    display: flex;
    .el-image {
        width: 30%;
        margin: 0 auto;
    }
}
</style>